import axios from 'axios'
import { useEffect, useState } from 'react'
import './housedetail.scss'
import Headernav from '../../components/headerNav/Headernav'
import { Swiper } from 'antd-mobile'
import {Tag, Space} from 'antd-mobile'
type Props = {
    history:any
}

export default function Housedetail({history}: Props) {
    let id = history.location.state.id
    const houseTagStyle = [
      { color: "#39becd",background: "#e1f5f8",border:"none" },
      { color: "#3fc28c",background: "#e1f5ed",border:"none" },
      { color: "#5aabfd",background: "#e6f2ff",border:"none" },
      { color: "#000",background: "#fff",border:"none" }
    ]

    useEffect(() => {
      getHouse()
      
    }, [])
    let url:string = 'http://localhost:8080'
    const getHouse = async () => {
      let BMap = window.BMap;
      let map = new window.BMap.Map("mapcon");
        let {data:{body:data}} = await axios.get(url+'/houses/'+id)
        console.log(data.supporting);
        setdtl(data)
        map = new BMap.Map("mapcon")
        map.centerAndZoom(new BMap.Point(data.coord.longitude,data.coord.latitude), 15)

        // 创建label实例对象
        const labelLays = new BMap.Label(data.community,{
          position: new BMap.Point(data.coord.longitude,data.coord.latitude),
          offset: new BMap.Size(-35,-35)
        })

        // 调用 setStyle() 方法设置样式
        labelLays.setStyle({ 
          color: '#fff',
          fontSize: '0.1rem',
          backgroundColor:"#EE5D5B",
          border: '2px solid #F82221'
        })

        labelLays.addEventListener('click', () => {
          let zoom = map.getZoom()
          if(zoom + 2 < 19){
            map.centerAndZoom(new BMap.Point(data.coord.longitude,data.coord.latitude), zoom + 2)
          }else{
            map.centerAndZoom(new BMap.Point(data.coord.longitude,data.coord.latitude), 19)
          }
          
        })

        // 将文本覆盖物添加到地图中
        map.addOverlay(labelLays)

    }


    const [housedtl, setdtl] = useState<any>({})
  return (
    <div className='housedetail'>
      <div className='contents'>
        <div className='header'>
          <Headernav title={housedtl.community as string} color="#fff" backcolor="rgba(0,0,0,0)"/>
        </div>
        {/* 轮播图 */}
        <Swiper loop autoplay>
          {
            housedtl.houseImg && housedtl.houseImg.map((item:string) => (
              <Swiper.Item key={item}>
                <div 
                style={{ 
                  background: `url(${url + item}) center center no-repeat`,
                  height:"2.52rem",
                  backgroundSize:"cover"
                  }}>
                </div>
              </Swiper.Item>
              ))
          }
        </Swiper>
        {/* 筛选内容 */}
        <div className='cont1'>
          <div className='ttl'>{housedtl.title}</div>
          <Space>
              {
                housedtl.tags && housedtl.tags.map((item:string, index:number) =>(
                  <Tag style={houseTagStyle[index] || houseTagStyle[3]} key={index}>{item}</Tag>
              ))
              }
          </Space>
          {/* 规格1 */}
          <div className="guige1">
            <div>
              <div>{housedtl.price}<span>/月</span></div>
              <div>租金</div>
            </div>
            <div>
              <div>{housedtl.roomType}</div>
              <div>房型</div>
            </div>
            <div>
              <div>{housedtl.size}平米</div>
              <div>面积</div>
            </div>
          </div>
          <div className='guige2'>
                <div>
                  <div>装修:</div>
                  <div>{housedtl.tags && housedtl.tags[0]}</div>
                </div>
                <div>
                  <div>朝向:</div>
                  <div>{housedtl.oriented && housedtl.oriented.join('、')}</div>
                </div>
                <div>
                  <div>楼层:</div>
                  <div>{housedtl.floor}</div>
                </div>
                <div>
                  <div>类型:</div>
                  <div>普通住宅</div>
                </div>
          </div>
        </div>

        {/* 地图 */}

        <div className='maps'>
              <div className="mapstitle">小区: {housedtl.community}</div>
              <div className="mapcon" id="mapcon"></div>
        </div>

        {/* 房屋配套 */}

        <div className='peitao'>
          <div className='ptitle'>房屋配套</div>
          <div className='ptcont'>
            {
              housedtl.supporting && housedtl.supporting.map((item:string) => (
                <div key={item}>{item}</div>
              ))
            }
            {
              housedtl.supporting && !housedtl.supporting.length && (
                <div style={{lineHeight:'0.36rem', height:'0.36rem'}}>暂无数据</div>
              )
            }
          </div>
        </div>
      </div>
      <div className='buybtn'>
        <div>收藏</div>
        <div>在线咨询</div>
        <div>电话预约</div>
      </div>
    </div>
  )
}